<template>
  <div class='main-container'>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>提交离职</el-breadcrumb-item>
    </el-breadcrumb>
    <div class='title'>
      <h4>
        我的申请
      </h4>
      <el-button type="primary" class='title-btn' @click="dialogVisible=true">
        新建申请
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="leaveList" style="width: 100%" border stripe>
      <el-table-column prop="user" label="发起人" width='70' ></el-table-column>
      <el-table-column prop="workNumber" label="工号" ></el-table-column>
      <el-table-column prop="leaveReason" label="离职原因" ></el-table-column>
      <el-table-column prop="createTime" label="申请时间">
        <template slot-scope='scope'>
          {{scope.row.createTime|dateFormat}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="getStatus(scope.row.status).color"
            disable-transitions>{{getStatus(scope.row.status).text}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="130">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==='0'" type="primary" size="mini" icon="el-icon-edit" circle @click="removeById(scope.row)"></el-button>
          <el-button v-if="scope.row.status==='0'" type="danger" size="mini" icon="el-icon-close" circle @click="removeById(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <!-- 添加待入职用户 -->
    <el-dialog
      title="提交离职"
      :visible.sync="dialogVisible"
      width="50%"
      @close="addClose"
    >
      <el-row>
        提交离职申请 由hr审批
      </el-row>
      <el-form  label-width="70px" :model="addForm"  ref="addForm">
        <el-form-item label="离职原因" prop="reason" :disabled="true">
          <el-input v-model="addForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="commitLeave">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'StaffLeave',
    data(){
      return{
        dialogVisible:false,
        leaveList:[],
        addForm:{
          reason:''
        },
      }
    },
    async created() {
      await this.getUserLeaveList()
    },
    methods:{
      getUserLeaveList:async function(){
        // const {data:res}=await this.$http.get('shop/findAllcomm',)
        //   if(res.data.status!==200){
        //   return this.$message.error("获取失败")
        // }
        this.$message.success("获取离职请求列表成功")
        // this.contractsList=res.meta
        this.leaveList=[
          {
            leaveId:1,
            user:'李小龙',
            workNumber:'10005',
            department:'产品部',
            post:'产品经理',
            leaveReason:'升学',
            status:'0',
            createTime:'2022-04-18 00:00:00'
          }
        ]
      },
      getStatus(val){
        let statusMap = {
          '0':{color:'warning',text:'待审批'},
          '1':{color:'success',text:'已审批'},
          '2':{color:'danger',text:'已驳回'},
        }
        return statusMap[val]
      },
      jumpToFilter(val){
        this.$router.push(`/staffFilter/${val}`)
      },
      // 对话框关闭事件
      addClose:function(){
        this.$refs.addForm.resetFields();
      },
      commitLeave(){

      }
    }
  }
</script>

<style lang="less" scoped>
  .main-container{
    padding: 10px 20px;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-btn{

        width: 150px;
        height: 50px
      }
    }
    h4{
      color: gray;
      font-size:20px;
      font-weight: normal
    }
  }
</style>
